<template>
  <div class="plateList">

    <!-- 筛选表单 -->
    <el-form class="searchForm" label-width="70px">
      <el-form-item label="名称">
        <el-input v-model="searchForm.name" type="input" placeholder="请输入板块名称" size="mini" />
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker
          v-model="searchForm.createDate"
          type="daterange"
          size="mini"
          start-placeholder="请选择开始日期"
          end-placeholder="请选择结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label-width="0">
        <el-button-group class="button-group">
          <el-button type="primary" size="mini" icon="el-icon-search" @click="handleSearch">筛选</el-button>
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="handleResetSearchForm">重置</el-button>
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      :data="plateList"
      :header-cell-style="{'text-align': 'center','background': 'rgb(248 248 248)'}"
      :cell-style="{'text-align': 'center'}"
    >
      <el-table-column label="编号" prop="id" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="创建日期" prop="createDate" />
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button-group class="button-group">
            <el-button type="warning" size="mini" :loading="isButtonLoading" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" :loading="isButtonLoading" @click="handleDelete(scope.row)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :total="total"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[10,15,20,25,30]"
      layout="total, sizes, prev, pager, next, jumper"
      style="text-align: right;margin-right: 10px;"
      @current-change="handleChange"
      @size-change="handleSizeChange"
    />

    <!-- 新增/修改对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="isDialogVisible"
      @close="getPlateList"
    >
      <el-form
        ref="form"
        label-width="70px"
        :rules="rules"
        :model="plateForm"
        hide-required-asterisk
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="plateForm.name" type="text" placeholder="请输入板块名称" />
        </el-form-item>
        <el-form-item label="创建日期">
          <el-date-picker
            v-model="plateForm.createDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%;"
          />
        </el-form-item>
        <el-button style="width: 100%;" type="primary" :loading="isButtonLoading" @click="handleSubmit">确定</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getPlateList, updatePlate, savePlate, deletePlate } from '@/api/plate'
export default {
  name: 'PlateList',
  data() {
    return {
      plateList: [],
      total: undefined,
      pageNum: 1,
      pageSize: 10,
      searchForm: {
        name: undefined,
        createDate: undefined
      },
      dialogTitle: undefined,
      isDialogVisible: false,
      dialogType: undefined,
      plateForm: {
        name: undefined,
        createDate: undefined
      },
      rules: {
        name: [{
          message: '请输入板块名称',
          required: true,
          trigger: 'blur'
        }],
        createDate: [{
          message: '请选择日期',
          required: true,
          trigger: 'blur'
        }]
      },
      isButtonLoading: false
    }
  },
  beforeMount() {
    this.getPlateList()
  },
  methods: {
    handleSearch() {
      this.pageNum = 1
      this.pageSize = 10
      this.getPlateList()
    },
    handleDelete(row) {
      this.$confirm(`确定要删除编号为${row.id}的数据吗?`, '提示').then(() => {
        this.isButtonLoading = true
        deletePlate([row.id]).then(() => {}, () => {}).finally(() => {
          this.isButtonLoading = false
          this.getPlateList()
        })
      }, () => {})
    },
    handleAdd() {
      this.dialogType = 'add'
      this.dialogTitle = '新增板块信息'
      this.isDialogVisible = true
      this.plateForm = {
        name: undefined,
        createDate: undefined
      }
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.dialogType === 'edit') {
            this.isButtonLoading = true
            updatePlate(this.plateForm).then(() => {}, () => {}).finally(() => {
              this.isButtonLoading = false
              this.isDialogVisible = false
              this.getPlateList()
            })
          } else {
            this.plateForm.createDate = new Date()
            savePlate(this.plateForm).then(() => {}, () => {}).finally(() => {
              this.isButtonLoading = false
              this.isDialogVisible = false
              this.getPlateList()
            })
          }
        } else {
          console.log('表单验证有误')
        }
      })
    },
    handleEdit(row) {
      this.dialogType = 'edit'
      this.dialogTitle = '修改板块信息'
      this.isDialogVisible = true
      this.plateForm = row
    },
    handleResetSearchForm() {
      this.searchForm = {
        name: undefined,
        createDate: undefined
      }
      this.getPlateList()
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getPlateList()
    },
    handleChange(value) {
      this.pageNum = value
      this.getPlateList()
    },
    async getPlateList() {
      const searchParam = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        searches: [
          {
            key: 'name',
            rule: 'like',
            value: this.searchForm.name
          },
          {
            key: 'createDate',
            rule: 'scope',
            value: this.searchForm.createDate
          }
        ]
      }
      const { data } = await getPlateList(searchParam)
      this.total = data.total
      this.plateList = data.list
    }
  }
}
</script>

<style lang="scss" scoped>
.plateList {
  .searchForm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .el-form-item {
      width: 30%;
      margin-left: 5px;
      .el-select {
        width: 100%;
      }
    }
    .button-group {
      margin-left: 10px;
      width: 100%;
      justify-content: left;
    }
  }
  .button-group {
    display: flex;
    justify-content: center;
    .el-button {
      margin-right: 10px;
    }
  }
}
</style>
